<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue组件的基本使用</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
    <my-table :cases="cases1" :name="name"></my-table>
</div>

</body>
<script>
    const casesData = [
        {
            case_id: 1,
            title: "用例001",
            result: "success"
        },
        {
            case_id: 2,
            title: "用例002",
            result: "error"
        },

    ];

    const casesData2 = [
        {
            case_id: 3,
            title: "用例003",
            result: "fail"
        },
        {
            case_id: 4,
            title: "用例004",
            result: "success"
        }, {
            case_id: 5,
            title: "用例004",
            result: "success"
        },
    ]

    const tableTemplate = {
        template: `
          <h3>{{ name }}</h3>
<!--          <h3>{{ cTime }}</h3>-->
          <table border="1">
          <!-- 表头 -->
          <tr>
            <th>用例ID</th>
            <th>用例标题</th>
            <th>执行结果</th>
            <th>操作</th>
          </tr>

          <!-- 表格的数据 -->
          <tr v-for='item in cases'>
            <td>{{ item.case_id }}</td>
            <td>{{ item.title }}</td>
            <td>{{ item.result }}</td>
            <td>
              <!-- 点击删除按钮，调用 deleteRow方法，并传入当前这行数据的id-->
              <button type="button" @click='deleteRow(item.case_id)'>删除</button>
            </td>
          </tr>
          </table>
        `,
        props: ['cases', 'name']
    }

    const app = Vue.createApp({
        data() {
            return {
                cases: casesData,
                cases1: casesData2,
                name: '这个是我的测试表格'
            }
        },
        components:{
            'my-table': tableTemplate
        }
    });


    app.mount('#app');
</script>
</html>